<script setup lang='tsx' name='ChatHistory'>
import { useUserStore } from '@/stores/user';
import type { HistoryItem } from '@/types/views/chat';
const userStore = useUserStore()
type Props = {
    history: HistoryItem
}
const { history } = defineProps<Props>()

</script>

<template>
    <div class='chat-history-item-container-left' v-if="userStore.user.id !== history.senderId">
        <el-avatar :src="history.sender.headPic" mt-8px> {{ history.sender.headPic ? history.sender.headPic :
        history.sender.nickName }} </el-avatar>
        <div class="chat-item-right" ml-16px>
            <span class="nick-name">{{ history.sender.nickName }}</span>
            <div class="chat-msg" mt-10px>
                <i class="triangle"></i>
                {{ history.content }}
            </div>
        </div>
    </div>
    <div class='chat-history-item-container-right' v-else>
        <el-avatar :src="history.sender.headPic" mt-8px> {{ history.sender.headPic ? history.sender.headPic :
        history.sender.nickName }} </el-avatar>
        <div class="chat-item-right" mr-16px>
            <div class="chat-msg" mt-10px>
                <i class="triangle"></i>
                {{ history.content }}
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.chat-history-item-container-left {
    display: flex;
    margin: 10px 0;

    .chat-item-right {


        .nick-name {
            font-size: 12px;
        }

        .chat-msg {
            position: relative;
            max-width: 300px;
            padding: 8px;
            border-radius: 6px;
            background-color: #fff;
        }
    }

    .triangle {
        position: absolute;
        display: inline-block;
        top: 6px;
        left: 0;
        transform: translateX(-100%);
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        /* 较大的三角形 */
        border-bottom: 6px solid transparent;
        /* 较大的三角形 */
        border-right: 8px solid #fff;
        /* 较大的三角形 */
    }

}

.chat-history-item-container-right {
    display: flex;
    flex-direction: row-reverse;
    margin: 10px 0;

    .chat-item-right {
        .nick-name {
            font-size: 12px;
        }

        .chat-msg {
            position: relative;
            max-width: 300px;
            padding: 8px;
            border-radius: 6px;
            background-color: #fff;
        }
    }

    .triangle {
        position: absolute;
        display: inline-block;
        top: 6px;
        right: 0;
        transform: translateX(100%);
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        /* 较大的三角形 */
        border-bottom: 6px solid transparent;
        /* 较大的三角形 */
        border-left: 8px solid #fff;
        /* 较大的三角形 */
    }

}
</style>